前言

終於來到第 20 天了(淚目)，再十天就結束啦！為了符合你各位倒數的喜悅的心，今明兩天我們要先後討論如何用 js 取得時間，以及倒數計時的功能怎麼做。那麼我們就趕緊開始吧！

newDate()

要取得目前標準時間的方法非常簡單：

let date = new Date();
alert(date); //可換成其他你想要顯示的方式

用 alert 的方式會這樣顯示：

當然你也可以寫成 new Date().toGMTString() ，一樣會取得，顯示方式稍有不同，為 Mon, 14 Sep 2020 15:23:53 GMT 。

但是上面的顯示方式不一定是你所喜愛的，或並不需要他倒這麼長串的資訊出來。因此，可以使用下面幾種來單獨取出需要的年月日等資訊：

• date.getFullYear() ：年
• date.getMonth() ：月
• date.getDate() ：日
• date.getDay() ：星期幾
• date.getHours() ：時
• date.getMinutes() ：分
• date.getSeconds() ：秒
• date.getMilliseconds() ：毫秒
• date.getTime() ：時間戳

其中，最容易搞混的應該就是星期幾和日期了，請務必在筆記上註記星號~

另外還有幾個小細節要注意。 getMonth 跟陣列的位置一樣，是從 0 開始算，所以一月是 0 ，二月是 1 ...依此類推，要讓電腦顯示正確的話記得要 +1 。星期幾也是從 0 開始算，只是 0 代表的是星期日，所以相對來說比較容易記住。

在使用上和剛剛的 new Date() 一樣，先宣告一個等於 new Date() 的變數，然後用這個變數去取資料。例如：

let time = new Date();
let year = time.getFullYear(); //console面板打year，顯示目前年份

現在讓我們使用上述工具，讓網頁用下面的樣式，來顯示目前的時間吧！

下面要公布答案囉~

• html

<h1 class = "word"></h1>

• js

let time = new Date();
let year = time.getFullYear();
let month = time.getMonth();
let date = time.getDate();
let day = time.getDay();
let hours = time.getHours();
let minutes = time.getMinutes();
let seconds = time.getSeconds();
let milliseconds = time.getMilliseconds();

const word = document.querySelector('.word');
word.innerHTML = `
  現在是標準時間 ${year} 年 ${month+1} 月 ${date} 日星期 ${day} <br/>
  ${hours} : ${minutes} : ${seconds} : ${milliseconds}
`;

恩，的確是不難啦，但做出來很醜，像星期一的一變成數字 1 了，要怎樣改成中文字呢？

記得你貼心的好朋友陣列嗎？我們可以用陣列來改寫一下上面。

const dayName = ["日","一","二","三","四","五","六"] 

const word = document.querySelector('.word');
word.innerHTML = `
  現在是標準時間 ${year} 年 ${month+1} 月 ${date} 日星期${dayName[day]} <br/>
  ${hours} : ${minutes} : ${seconds} : ${milliseconds}
`;

最上面都不用動，只要新增一個擺放星期幾的陣列，並在要放星期幾的位置改成${dayName[day]} 。

之所以會這樣擺，是因為要讓它呈現 ${取出中文字底幾個位置[取得的星期數位在的位置]} 的樣子。也就是說，畢竟上面 getDay() 時取出的也只是一個數字，而這個數字代表的不只是星期日是 0 、星期一是 1 ，也可想像成一組陣列 [0,1,2,3,4,5,6] ，並會根據現在是星期幾取出對應的數字 aka 該星期數位在陣列的位置。我們可以利用寫一模一樣的陣列，讓他取出後直接對應到我們寫的陣列的位置，來換成中文字。同時。正如剛剛提過的，星期幾是從日開始算，所以日要放在第一個，不然每一天都會加一。

這個做法不只可以使用在星期上，也可以用在月日轉換成文字上，只是陣列可能會變得非常長就是了。

目前我們做出來的時鐘還不會主動運轉，明天進行到倒數計時時會讓時鐘真正動起來，敬請拭目以待。也別忘了留下你今天的程式碼！我們明天還會再次使用。

學習與參考資料

JS 學徒特訓班教學影片及練習題 41 關
EP.21 RE：從零開始的學習 JS 生活-第二十一日： https://ithelp.ithome.com.tw/articles/10225167
Date 對象： https://www.w3school.com.cn/jsref/jsref_obj_date.asp